<template>
  <el-menu class="top-menu" :default-active="activeIndex"
           mode="horizontal"
           text-color="#333">
    <template v-for="(item,index) in items" :key="index">
      <el-menu-item :index="item.parentId+''" @click="openMenu(item)">
        <template v-slot:title>
<!--          <i class="icon-caidan"></i>-->
          <span>{{ generateTitle(item) }}</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import {indexKey, indexOpenMenuKey} from "@/page/index/indexSymbol.js";
import {useUserStore} from "@/store/modules/user.js";
import {ref, reactive, computed} from "vue"
import {useRouter} from "vue-router"
import {getStore} from "utils/store.js";

defineOptions({
  name: "top-menu",
})

const activeIndex = ref("0")
const items = ref([])
const optionData = reactive({activeIndex, items})

const index = inject(indexKey)
const indexOpenMenu = inject(indexOpenMenuKey)

function created() {
  getMenu();
}

created()


const tagCurrent = computed(() => {
  const userStore = useUserStore();
  return userStore.tagCurrent
})
const menu = computed(() => {
  const userStore = useUserStore();
  return userStore.menu
})

function openMenu(item) {
  console.log("item", item)
  // this.index.openMenu(item)
  indexOpenMenu(item)
}


function getMenu() {
  const userStore = useUserStore()
  let menuALl = getStore({name: `menuAll`})
  console.log("menuAll", menuALl)
  optionData.items = menuALl
  // userStore.GetTopMenu().then(res => {
  //   optionData.items = res.data;
  // });
}

const router = useRouter()

function generateTitle(item) {
  return router.$avueRouter.generateTitle(item);
}

</script>

<script>
// import {useUserStore} from "../../../store/modules/user.js";
// import {mapState} from "pinia";

export default {

  data() {
    return {};
  },
  // inject: ["index"],

  computed: {
    // tagCurrent不知道哪里的
    // ...mapState(useUserStore, ["tagCurrent", "menu"])


  },
  methods: {}
};
</script>